<template>
  <div>
    <!-- 各项营收 -->
    <div class="gutter-example">
      <a-tabs :active-key="revenueTab" :tab-bar-gutter="16" @change="revenueTabChange">
        <template slot="tabBarExtraContent">
          <div style="overflow:hidden;margin:11px 25px 0 0">
            <a-range-picker
              style="width:220px;float:right"
              @change="revenueChange"
              :value="revenueValue"
            />
          </div>
        </template>
        <a-tab-pane v-for="v in revenueList" :key="v.id" :tab="v.name" style="padding:24px 24px;">
          <!-- 集团业务营收 -->
          <a-row :gutter="20" v-if="v.id === 0">
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon1">
                <p>主营业务收入（元）</p>
                <div class="revenueText">{{revenueData.companyReceivableAmount}}</div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon2">
                <p>主营业务成本（元）</p>
                <div class="revenueText">{{revenueData.companyPayableAmount}}</div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon3">
                <p>主营业务利润（元）</p>
                <div class="revenueText">{{revenueData.companyProfit}}</div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon4">
                <p>利润率</p>
                <div class="revenueText">{{revenueData.companyProfitRate}}%</div>
              </a-card>
            </a-col>
          </a-row>
          <!-- 佳华业务营收 -->
          <a-row :gutter="20" v-if="v.id === 1">
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon1">
                <p>主营业务收入（元）</p>
                <div class="revenueText">{{revenueData.jhReceivableAmount}}</div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon2">
                <p>主营业务成本（元）</p>
                <div class="revenueText">{{revenueData.jhPayableAmount}}</div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon3">
                <p>主营业务利润（元）</p>
                <div class="revenueText">{{revenueData.jhProfit}}</div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon4">
                <p>利润率</p>
                <div class="revenueText">{{revenueData.jhProfitRate}}%</div>
              </a-card>
            </a-col>
          </a-row>
          <!-- 佳特业务营收 -->
          <a-row :gutter="20" v-if="v.id === 2">
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon1">
                <p>主营业务收入（元）</p>
                <div class="revenueText">{{revenueData.jtReceivableAmount}}</div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon2">
                <p>主营业务成本（元）</p>
                <div class="revenueText">{{revenueData.jtPayableAmount}}</div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon3">
                <p>主营业务利润（元）</p>
                <div class="revenueText">{{revenueData.jtProfit}}</div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon4">
                <p>利润率</p>
                <div class="revenueText">{{revenueData.jtProfitRate}}%</div>
              </a-card>
            </a-col>
          </a-row>
          <!-- 佳创业务营收 -->
          <a-row :gutter="20" v-if="v.id === 3">
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon1">
                <p>主营业务收入（元）</p>
                <div class="revenueText">{{revenueData.jcReceivableAmount}}</div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon2">
                <p>主营业务成本（元）</p>
                <div class="revenueText">{{revenueData.jcPayableAmount}}</div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon3">
                <p>主营业务利润（元）</p>
                <div class="revenueText">{{revenueData.jcProfit}}</div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon4">
                <p>利润率</p>
                <div class="revenueText">{{revenueData.jcProfitRate}}%</div>
              </a-card>
            </a-col>
          </a-row>
          <!-- 政府补贴营收 -->
          <a-row :gutter="20" v-if="v.id === 4">
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon1">
                <p>主营业务收入（元）</p>
                <div class="revenueText">{{revenueData.subsidyReceivableAmount}}</div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon2">
                <p>主营业务成本（元）</p>
                <div class="revenueText">0</div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon3">
                <p>主营业务利润（元）</p>
                <div class="revenueText">{{revenueData.subsidyReceivableAmount}}</div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card class="revenueCard revenueIcon4">
                <p>利润率</p>
                <div
                  class="revenueText"
                >{{revenueData.subsidyReceivableAmount ? '100.00' : '0.00'}}%</div>
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- 箱量数据统计, 运输数据统计  -->
    <a-row :gutter="[24,24]" style="margin:12px 12px 0">
      <a-col :span="12">
        <a-card title="箱量数据统计" :bordered="false" class="work_title">
          <template slot="extra">
            <month-and-year @change="initDateSearch1" />
          </template>
          <div class="gutter-box">
            <a-row>
              <a-col :span="5">
                <div class="revenuet2">总箱量（个）：</div>
                <div class="revenueText2">{{total1}}</div>
                <a @click="toJH">更多明细...</a>
              </a-col>
              <a-col :span="19">
                <div class="echarts">
                  <div id="pieEcharts1"></div>
                  <div class="echarts-label">
                    <div class="item-label" v-for="(v,k) in data1" :key="k">
                      <template v-if="v.name != '暂无数据'">
                        <span class="idot" :style="{'background-color': color[k]}"></span>
                        <span class="name">{{v.name}}</span>
                        <span
                          class="percent"
                        >| {{( total1 === 0 ? 0 : v.value*100 / total1).toFixed(0)}}%</span>
                        <span class="number">{{v.value}} 个</span>
                      </template>
                    </div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="运输数据统计" :bordered="false" class="work_title">
          <template slot="extra">
            <month-and-year @change="initDateSearch2" />
          </template>
          <div class="gutter-box" style="height:180px;">
            <a-row>
              <a-col :span="12">
                <div class="revenuet2">航次统计（次）：</div>
                <div class="revenueText2">{{transportData.voyageCount}}</div>
                <a @click="toJC">更多明细...</a>
              </a-col>
              <a-col :span="12">
                <div class="revenuet2">陆运里程数（km）：</div>
                <div class="revenueText2">{{transportData.totalMileage}}</div>
                <a @click="toJT">更多明细...</a>
              </a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <!-- 资金流水, 佳华流水, 佳特流水, 佳创流水 -->
    <div class="gutter-example" style="margin:12px 24px 0">
      <a-tabs
        :active-key="capitalFlowTab"
        :tab-bar-gutter="16"
        @change="capitalFlowTabChange"
        :animated="false"
      >
        <template slot="tabBarExtraContent">
          <div style="margin:6px 15px 0 0">
            <today-to-year @change="capitalFlowDateChange" />
          </div>
        </template>
        <a-tab-pane
          v-for="v in capitalFlowList"
          :key="v.id"
          :tab="v.name"
          style="padding:20px 24px"
          :force-render="true"
        >
          <a-row :gutter="[16,16]" class="tatal_zjls">
            <a-col :span="16">
              <a-row :gutter="20">
                <a-col :span="8">
                  <a-card class="revenueCard capitalFlow1" :bordered="false">
                    <p>当前余额（元）</p>
                    <div class="revenueText">
                      {{capitalFlowData.totalBalance}}
                      <p style="color: #666;font-size: 15px;margin-left: 2px; height: 22px;"></p>
                    </div>
                  </a-card>
                </a-col>
                <a-col :span="8">
                  <a-card class="revenueCard capitalFlow2" :bordered="false">
                    <p>总收入（元）</p>
                    <div class="revenueText">
                      {{capitalFlowData.totalIncomeAmount}}
                      <p
                        style="color: #666;font-size: 15px;margin-left: 2px;"
                        v-if="capitalFlowDateType"
                      >{{capitalFlowData.incomeAmountRate}} %</p>
                    </div>
                  </a-card>
                </a-col>
                <a-col :span="8">
                  <a-card class="revenueCard capitalFlow3" :bordered="false">
                    <p>总支出（元）</p>
                    <div class="revenueText">
                      {{capitalFlowData.totalPayAmount}}
                      <p
                        style="color: #666;font-size: 15px;margin-left: 2px;"
                        v-if="capitalFlowDateType"
                      >{{capitalFlowData.payAmountRate}} %</p>
                    </div>
                  </a-card>
                </a-col>
              </a-row>
              <div id="accountEcharts" class="accountEcharts"></div>
            </a-col>
            <a-col :span="8">
              <div class="gutter-box">
                <div class="feeType">
                  <div class="f_left">费用类型统计</div>
                  <div class="f_right">
                    <a-button-group>
                      <a-button
                        type="primary"
                        :ghost="feeTypeStatus === 0 ? false : true"
                        @click="feeTypeClick(0)"
                      >支出</a-button>
                      <a-button
                        type="primary"
                        :ghost="feeTypeStatus === 1 ? false : true"
                        @click="feeTypeClick(1)"
                      >收入</a-button>
                    </a-button-group>
                  </div>
                </div>
                <div id="feeEcharts" class="feeEcharts"></div>
                <div class="echarts-label">
                  <div class="item-label" v-for="(v,k) in feeData" :key="k">
                    <template v-if="v.name != '暂无数据'">
                      <span class="idot" :style="{'background-color': color[k]}"></span>
                      <span class="name">{{v.name}}</span>
                      <span
                        class="percent"
                      >| {{( feeTotal === 0 ? 0 : v.value*100 / feeTotal).toFixed(0)}}%</span>
                      <span class="number">¥ {{v.value}}</span>
                    </template>
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- 固定资产, 资金账户 -->
    <a-row :gutter="[24,24]" style="margin:12px 12px 0">
      <a-col :span="12">
        <a-card title="固定资产" :bordered="false" class="work_title">
          <div class="gutter-box">
            <div class="echarts">
              <div id="pieEcharts4"></div>
              <div class="echarts-label">
                <div class="item-label" v-for="(v,k) in data4" :key="k">
                  <template v-if="v.name != '暂无数据'">
                    <span class="idot" :style="{'background-color': color[k]}"></span>
                    <span class="name">{{v.name}}</span>
                    <span class="percent">| {{v.value}}</span>
                    <span class="number">¥ {{v.number}}</span>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="资金账户" :bordered="false" class="work_title" style="height:363px;">
          <template slot="extra">
            <a-button-group>
              <a-button
                type="primary"
                :ghost="companyCapitalStatus === 1 ? false : true"
                @click="companyCapital(1)"
              >集团</a-button>
              <a-button
                type="primary"
                :ghost="companyCapitalStatus === 2 ? false : true"
                @click="companyCapital(2)"
              >佳华</a-button>
              <a-button
                type="primary"
                :ghost="companyCapitalStatus === 3 ? false : true"
                @click="companyCapital(3)"
              >佳特</a-button>
              <a-button
                type="primary"
                :ghost="companyCapitalStatus === 4 ? false : true"
                @click="companyCapital(4)"
              >佳创</a-button>
            </a-button-group>
          </template>
          <div class="gutter-box">
            <a-table
              :columns="columns"
              :loading="loading"
              :data-source="companyCapitalAccountList"
              :row-key="(record,index) => index"
              :pagination="pagination"
              :scroll="{y:150}"
            >
              <template slot="accountName" slot-scope="record">
                <a @click="accountDetail(record)">{{record.account}}</a>
              </template>
              <template slot="balance" slot-scope="record">
                <span v-if="record.currencyType === 'CNY'">￥</span>
                <span v-else>$</span>
                <span>{{record.balance.toFixed(2)}}</span>
              </template>
            </a-table>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <!-- 集团利润报表 -->
    <a-row :gutter="[24,24]" style="margin:0px 12px">
      <a-col :span="24">
        <a-card :bordered="false" class="work_title">
          <template slot="title">
            <a-tooltip placement="right" title="集团总市值=利润总额+投资金额=货币资金+应收账款+其他应收-应付账款-其他应付">
              <span>集团利润报表</span>
              <a-icon type="exclamation-circle" style="margin-left:10px;color:#999" />
            </a-tooltip>
          </template>
          <template slot="extra">
            <a-month-picker
              :value="monthValue"
              :disabled-date="disabledDate"
              :format="monthFormat"
              @change="monthChange"
            />
          </template>
          <div class="gutter-box">
            <a-row :gutter="20">
              <a-col :span="6">
                <a-card class="revenueCard profitIcon1">
                  <p>集团总市值（元）</p>
                  <div class="revenueText">{{profitData.companyMarketValue}}</div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card class="revenueCard profitIcon2">
                  <p>利润总额（元）</p>
                  <div class="revenueText">{{profitData.profitAmount}}</div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card class="revenueCard profitIcon3">
                  <p>投资金额（元）</p>
                  <div class="revenueText">{{profitData.investmentAmount}}</div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card class="revenueCard profitIcon4">
                  <p>货币资金（元）</p>
                  <div class="revenueText">{{profitData.currencyAmount}}</div>
                </a-card>
              </a-col>
            </a-row>
            <a-row :gutter="[20,40]">
              <a-col :span="6">
                <a-card class="revenueCard profitIcon1">
                  <p>应收账款（元）</p>
                  <div class="revenueText">{{profitData.receivableAmount}}</div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card class="revenueCard profitIcon2">
                  <p>其他应收（元）</p>
                  <div class="revenueText">{{profitData.otherReceivableAmount}}</div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card class="revenueCard profitIcon3">
                  <p>应付账款（元）</p>
                  <div class="revenueText">{{profitData.payableAmount}}</div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card class="revenueCard profitIcon4">
                  <p>其他应付（元）</p>
                  <div class="revenueText">{{profitData.otherPayableAmount}}</div>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import moment from 'moment'
import MonthAndYear from '@/components/MonthAndYear'
import dataBIDateSelect from '@/components/dataBIDateSelect'
import {
  queryBIBusinessRevenue,
  queryBIContainerCount,
  queryBITransportData,
  queryBICapitalFlow,
  queryBICapitalFixed,
  queryBIProfitReport,
  queryCompanyCapitalAccountList
} from '@/api/dataBI'
const color = [
  '#3AA1FF',
  '#4ECB73',
  '#36CBCB',
  '#FBD437',
  '#F2637B',
  '#975FE4'
]
const noDataColor = [
  // '#f0f2f5'
  // '#f0f0f0'
  '#ddd'
]
const revenueList = [
  { name: '集团业务营收', id: 0 },
  { name: '佳华业务营收', id: 1 },
  { name: '佳特业务营收', id: 2 },
  { name: '佳创业务营收', id: 3 },
  { name: '政府补贴营收', id: 4 }
]
const capitalFlowList = [
  { name: '资金流水', id: '' },
  { name: '佳华流水', id: 2 },
  { name: '佳特流水', id: 3 },
  { name: '佳创流水', id: 4 }
]
const columns = [
  {
    title: '账户名称',
    scopedSlots: {
      customRender: 'accountName'
    }
  },
  {
    title: '开户银行',
    dataIndex: 'bank'
  },
  {
    title: '当前余额',
    scopedSlots: {
      customRender: 'balance'
    }
  }
]
export default {
  components: {
    [MonthAndYear.name]: MonthAndYear,
    [dataBIDateSelect.name]: dataBIDateSelect
  },
  data () {
    return {
      color,
      noDataColor,
      revenueList,
      revenueTab: 0,
      revenueData: {},
      revenueValue: [],
      total1: 0,
      data1: [],
      transportData: {},
      data4: [],
      companyCapitalStatus: 1,
      pageNum: 1,
      pageSize: 10,
      pagination: {},
      loading: true,
      companyCapitalAccountList: [],
      columns,
      monthFormat: 'YYYY-MM',
      profitData: {},
      capitalFlowList,
      capitalFlowTab: '',
      capitalFlowStartTime: '',
      capitalFlowEndTime: '',
      capitalFlowData: {},
      capitalFlowDateType: '',
      feeTypeStatus: 0, // 0：支出，1：收入
      feeData: [],
      feeTotal: 0,
      monthValue: '',
      btnControl: {}
    }
  },
  methods: {
    orderTypeToText (e) {
      let text
      switch (e) {
        case 'DOMESTIC_TRADE_EXPORTS':
          text = '内贸出口订单'
          break
        case 'DOMESTIC_TRADE_IMPORTS':
          text = '内贸进口订单'
          break
        case 'FOREIGN_TRADE_EXPORTS':
          text = '外贸出口订单'
          break
        case 'FOREIGN_TRADE_IMPORTS':
          text = '外贸进口订单'
          break
        case 'UNITED_TRANSPORT_EXPORTS':
          text = '联运出口订单'
          break
        case 'UNITED_TRANSPORT_IMPORTS':
          text = '联运进口订单'
          break
      }
      return text
    },
    fixedTypeToText (e) {
      let text
      switch (e) {
        case 'SHIP':
          text = '船舶'
          break
        case 'TRACTOR':
          text = '牵引车'
          break
        case 'TRAILER':
          text = '挂车'
          break
        case 'CAR':
          text = '公司轿车'
          break
        case 'OTHER':
          text = '其它'
          break
      }
      return text
    },
    // 环形图
    drawPie (target, text, subtext, data, textPosition, fontColor, edageText) {
      // 绘制图表
      target.setOption({
        title: {
          text: text,
          textStyle: {
            color: fontColor ? '#D9001B' : '#666',
            fontWeight: 'normal',
            fontSize: 14
          },
          subtext: subtext === 0 ? '0' : subtext,
          subtextStyle: {
            color: fontColor ? '#D9001B' : '#666',
            fontWeight: 'bold',
            fontSize: textPosition ? 20 : 26
          },
          top: textPosition || '43%',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: function (data) {
            return (
              data.seriesName +
              '<br/>' +
              data.name +
              ' : ' +
              data.value +
              ' (' +
              data.percent.toFixed(0) +
              '%)'
            )
          }
        },
        legend: {
          selectedMode: 'true',
          top: 0,
          left: 10,
          orient: 'vertical',
          textStyle: {
            fontSize: 14,
            color: '#666'
          },
          show: false
        },
        series: [
          {
            name: edageText || '箱量',
            type: 'pie',
            radius: ['70%', '85%'],
            selectedMode: 'single',
            label: {
              show: false,
              position: 'center'
            },
            // color: data[0].name === '暂无数据' ? noDataColor : color,
            color: color,
            data: data
          }
        ]
      })
    },
    // 折线图
    drawLine (target, dateArray, incomeArray, payArray) {
      target.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['收入', '支出']
        },
        grid: {
          left: '3%',
          right: '10%',
          bottom: '12%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dateArray
        },
        yAxis: {
          type: 'value'
        },
        dataZoom: [
          {
            startValue: dateArray[0]
          },
          {
            type: 'inside'
          }
        ],
        series: [
          {
            name: '收入',
            type: 'line',
            // stack: '总量',
            color: color[0],
            data: incomeArray
          },
          {
            name: '支出',
            type: 'line',
            // stack: '总量',
            color: color[1],
            data: payArray
          }
        ]
      })
    },
    businessRevenueRequest (e) {
      queryBIBusinessRevenue(e)
        .then(res => {
          let resData = res.data
          resData.companyReceivableAmount = resData.companyReceivableAmount.toFixed(2)
          resData.companyPayableAmount = resData.companyPayableAmount.toFixed(2)
          resData.companyProfit = resData.companyProfit.toFixed(2)
          resData.companyProfitRate = resData.companyProfitRate.toFixed(2)

          resData.jhReceivableAmount = resData.jhReceivableAmount.toFixed(2)
          resData.jhPayableAmount = resData.jhPayableAmount.toFixed(2)
          resData.jhProfit = resData.jhProfit.toFixed(2)
          resData.jhProfitRate = resData.jhProfitRate.toFixed(2)

          resData.jtReceivableAmount = resData.jtReceivableAmount.toFixed(2)
          resData.jtPayableAmount = resData.jtPayableAmount.toFixed(2)
          resData.jtProfit = resData.jtProfit.toFixed(2)
          resData.jtProfitRate = resData.jtProfitRate.toFixed(2)

          resData.jcReceivableAmount = resData.jcReceivableAmount.toFixed(2)
          resData.jcPayableAmount = resData.jcPayableAmount.toFixed(2)
          resData.jcProfit = resData.jcProfit.toFixed(2)
          resData.jcProfitRate = resData.jcProfitRate.toFixed(2)

          resData.subsidyReceivableAmount = resData.subsidyReceivableAmount.toFixed(2)
          resData.subsidyPayableAmount = resData.subsidyPayableAmount.toFixed(2)
          // resData.companyReceivableAmount.toFixed(2)
          // resData.companyReceivableAmount.toFixed(2)
          // resData.companyReceivableAmount.toFixed(2)
          // resData.companyReceivableAmount.toFixed(2)
          this.revenueData = resData
        })
        .catch(rs => {})
    },
    containerCountRequest (e) {
      queryBIContainerCount(e)
        .then(res => {
          // // console.log(res.data)
          let temData = res.data
          let data1 = []
          let total1 = 0
          if (temData.length > 0) {
            temData.forEach(v => {
              let newObj = {
                value: v.containerCount,
                name: this.orderTypeToText(v.orderType)
              }
              data1.push(newObj)
              total1 += v.containerCount
            })
          } else {
            total1 = 0
            data1 = [{ value: 0, name: '暂无数据' }]
          }

          this.data1 = data1
          this.total1 = total1
          let echarts1 = this.$echarts.init(
            document.getElementById('pieEcharts1')
          )
          this.drawPie(echarts1, '箱量', total1, data1, '38%')
        })
        .catch(rs => {})
    },
    transportDataRequest (e) {
      queryBITransportData(e)
        .then(res => {
          this.transportData = res.data
        })
        .catch(rs => {})
    },
    capitalFixedRequest (e) {
      queryBICapitalFixed(e)
        .then(res => {
          // // console.log(res.data)
          let temData = res.data
          let data4 = []
          let total4 = 0
          if (temData.length > 0) {
            temData.forEach(v => {
              let newObj = {
                value: v.capitalFixedCount,
                name: this.fixedTypeToText(v.capitalFixedType),
                number: v.capitalFixedValue.toFixed(2)
              }
              data4.push(newObj)
              total4 += v.capitalFixedValue
            })
          } else {
            data4 = [{ value: '0.00', name: '暂无数据' }]
          }
          this.data4 = data4
          // // console.log(data4)
          let fixedEcharts = this.$echarts.init(
            document.getElementById('pieEcharts4')
          )
          this.drawPie(
            fixedEcharts,
            '总资产',
            `¥ ${total4.toFixed(2)}`,
            data4,
            '40%',
            '',
            '资产'
          )
        })
        .catch(rs => {})
    },
    companyCapitalAccountListRequest (e) {
      this.loading = true
      queryCompanyCapitalAccountList(e)
        .then(res => {
          this.companyCapitalAccountList = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                deptId: this.companyCapitalStatus
              }
              this.companyCapitalAccountListRequest(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                deptId: this.companyCapitalStatus
              }
              this.companyCapitalAccountListRequest(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    profitReportRequest (e) {
      queryBIProfitReport(e)
        .then(res => {
          let resData = res.data
          resData.companyMarketValue = resData.companyMarketValue.toFixed(2)
          resData.profitAmount = resData.profitAmount.toFixed(2)
          resData.investmentAmount = resData.investmentAmount.toFixed(2)
          resData.currencyAmount = resData.currencyAmount.toFixed(2)
          resData.receivableAmount = resData.receivableAmount.toFixed(2)
          resData.otherReceivableAmount = resData.otherReceivableAmount.toFixed(2)
          resData.payableAmount = resData.payableAmount.toFixed(2)
          resData.otherPayableAmount = resData.otherPayableAmount.toFixed(2)
          this.profitData = resData
        })
        .catch(rs => {})
    },
    capitalFlowRequest (e) {
      queryBICapitalFlow(e)
        .then(res => {
          res.data.totalBalance = res.data.totalBalance.toFixed(2)
          res.data.totalIncomeAmount = res.data.totalIncomeAmount.toFixed(2)
          res.data.incomeAmountRate = res.data.incomeAmountRate ? res.data.incomeAmountRate.toFixed(2) : '0.00'
          res.data.totalPayAmount = res.data.totalPayAmount.toFixed(2)
          res.data.payAmountRate = res.data.payAmountRate ? res.data.payAmountRate.toFixed(2) : '0.00'
          this.capitalFlowData = res.data
          let feeTemData = res.data.transactionTypeList
          let feeData = []
          let feeTotal = 0
          if (feeTemData.length > 0) {
            feeTemData.forEach(v => {
              let newObj = {
                value: v.payAmount.toFixed(2),
                name: v.transactionTypeName
              }
              feeData.push(newObj)
              feeTotal += Number(v.payAmount)
            })
          } else {
            feeData = [{ value: '0.00', name: '暂无数据' }]
          }
          this.feeData = feeData
          this.feeTotal = feeTotal.toFixed(2)
          let feeContainers = document.getElementsByClassName('feeEcharts')
          for (let i = 0; i < feeContainers.length; i++) {
            let feeEcharts = this.$echarts.init(feeContainers[i])
            this.drawPie(
              feeEcharts,
              '总支出金额',
              `¥ ${feeTotal.toFixed(2)}`,
              feeData,
              '40%',
              '',
              '金额'
            )
          }
          // let feeEcharts = this.$echarts.init(
          //   document.getElementById('feeEcharts')
          // )
          // this.drawPie(
          //   feeEcharts,
          //   '总支出金额',
          //   `¥ ${feeTotal}`,
          //   feeData,
          //   '40%',
          //   '',
          //   '金额'
          // )
          let dateArray = []
          let incomeArray = []
          let payArray = []
          let accountTemData = res.data.capitalFlowList
          accountTemData.forEach(v => {
            dateArray.push(v.transactionDate)
            incomeArray.push(v.incomeAmount.toFixed(2))
            payArray.push(v.payAmount.toFixed(2))
          })
          // // console.log(incomeArray)
          // // console.log(payArray)
          let accountContainers = document.getElementsByClassName(
            'accountEcharts'
          )
          for (let i = 0; i < accountContainers.length; i++) {
            let accountEcharts = this.$echarts.init(accountContainers[i])
            this.drawLine(accountEcharts, dateArray, incomeArray, payArray)
          }
          // let accountEcharts = this.$echarts.init(
          //   document.getElementById('accountEcharts')
          // )
          // this.drawLine(accountEcharts, dateArray, incomeArray, payArray)
        })
        .catch(rs => {})
    },
    getCurrentDay () {
      var date = new Date()
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    getMonthStartAndEnd (AddMonthCount) {
      // 起止日期数组
      var startStop = []
      // 获取当前时间
      var currentDate = new Date()
      var month = currentDate.getMonth() + AddMonthCount
      if (month < 0) {
        var n = parseInt(-month / 12)
        month += n * 12
        currentDate.setFullYear(currentDate.getFullYear() - n)
      }
      currentDate = new Date(currentDate.setMonth(month))
      // 获得当前月份0-11
      var currentMonth = currentDate.getMonth()
      // 获得当前年份4位年
      var currentYear = currentDate.getFullYear()
      // 获得上一个月的第一天
      var currentMonthFirstDay = new Date(currentYear, currentMonth, 1)
      // 获得上一月的最后一天
      var currentMonthLastDay = new Date(currentYear, currentMonth + 1, 0)
      // 添加至数组
      startStop.push(this.getDateStr(currentMonthFirstDay))
      startStop.push(this.getDateStr(currentMonthLastDay))
      // 返回
      return startStop
    },
    getDateStr (date) {
      var year = ''
      var month = ''
      var day = ''
      var now = date
      year = '' + now.getFullYear()
      if (now.getMonth() + 1 < 10) {
        month = '0' + (now.getMonth() + 1)
      } else {
        month = '' + (now.getMonth() + 1)
      }
      if (now.getDate() < 10) {
        day = '0' + now.getDate()
      } else {
        day = '' + now.getDate()
      }
      return year + '-' + month + '-' + day
    },
    getFullYear () {
      let fullYear = []
      fullYear.push(`${new Date().getFullYear()}-01-01`)
      fullYear.push(`${new Date().getFullYear()}-12-31`)
      return fullYear
    },
    revenueTabChange (key) {
      this.revenueTab = key
    },
    revenueChange (date, dateStr) {
      this.revenueValue = date
      if (dateStr[0] && dateStr[1]) {
        this.businessRevenueRequest({
          startQueryDate: dateStr[0],
          endQueryDate: dateStr[1]
        })
      }
    },
    initDateSearch1 (startTime, endTime) {
      this.removePieInstance()
      this.containerCountRequest({
        startQueryDate: startTime,
        endQueryDate: endTime
      })
    },
    removePieInstance () {
      document
        .getElementById('pieEcharts1')
        .removeAttribute('_echarts_instance_')
    },
    removeFeeInstance () {
      let feeContainers = document.getElementsByClassName('feeEcharts')
      for (let i = 0; i < feeContainers.length; i++) {
        feeContainers[i].removeAttribute('_echarts_instance_')
      }
      // document
      //   .getElementById('feeEcharts')
      //   .removeAttribute('_echarts_instance_')
    },
    removeAccountInstance () {
      let accountContainers = document.getElementsByClassName('accountEcharts')
      for (let i = 0; i < accountContainers.length; i++) {
        accountContainers[i].removeAttribute('_echarts_instance_')
      }
      // document
      //   .getElementById('accountEcharts')
      //   .removeAttribute('_echarts_instance_')
    },
    toJH () {
      this.$router.push('/dataBI/containerDataBi')
    },
    initDateSearch2 (startTime, endTime) {
      this.transportDataRequest({
        startQueryDate: startTime,
        endQueryDate: endTime
      })
    },
    toJC () {
      this.$router.push('/dataBI/shipAccount')
    },
    toJT () {
      this.$router.push('/dataBI/jiateDataBi')
    },
    companyCapital (e) {
      this.companyCapitalStatus = e
      this.companyCapitalAccountListRequest({
        deptId: e,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    accountDetail (e) {
      // this.$router.push(`/financialCenter/fundAccountManagement/${e.id}`)
      window.open(`/financialCenter/fundAccountManagement/${e.id}`, '_blank')
    },
    getLastMonth () {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth()
      if (month < 10) {
        if (month === 0) {
          year = year - 1
          month = 12
        } else {
          month = `0${month}`
        }
      }
      return year + '-' + month
    },
    disabledDate (current) {
      return current > moment(this.getLastMonth()).startOf('month')
      // return current && current > moment().startOf('month')
    },
    monthChange (date, dateStr) {
      this.monthValue = date
      if (dateStr) {
        this.profitReportRequest({
          queryDate: dateStr
        })
      }
    },
    capitalFlowTabChange (e) {
      this.removeFeeInstance()
      this.removeAccountInstance()
      setTimeout(() => {
        this.capitalFlowTab = e
        this.capitalFlowRequest({
          startQueryDate: this.capitalFlowStartTime,
          endQueryDate: this.capitalFlowEndTime,
          deptId: e,
          dateType: this.capitalFlowDateType
        })
      }, 100)
    },
    capitalFlowDateChange (dateType, startTime, endTime) {
      // // console.log(`开始时间：${startTime}`)
      // // console.log(`结束时间：${endTime}`)
      this.capitalFlowDateType = dateType
      this.capitalFlowStartTime = startTime
      this.capitalFlowEndTime = endTime
      this.removeFeeInstance()
      this.removeAccountInstance()
      this.capitalFlowRequest({
        startQueryDate: startTime,
        endQueryDate: endTime,
        deptId: this.capitalFlowTab,
        dateType: dateType
      })
    },
    feeTypeClick (e) {
      this.feeTypeStatus = e
      this.removeFeeInstance()
      let feeTemData = this.capitalFlowData.transactionTypeList
      // // console.log(feeTemData)
      let feeData = []
      let feeTotal = 0
      if (feeTemData.length > 0) {
        feeTemData.forEach(v => {
          let newObj = {
            value: e ? v.incomeAmount : v.payAmount,
            name: v.transactionTypeName
          }
          feeData.push(newObj)
          feeTotal += e ? v.incomeAmount : v.payAmount
        })
      } else {
        feeData = [{ value: 0, name: '暂无数据' }]
      }
      this.feeData = feeData
      this.feeTotal = feeTotal
      let feeContainers = document.getElementsByClassName('feeEcharts')
      for (let i = 0; i < feeContainers.length; i++) {
        let feeEcharts = this.$echarts.init(feeContainers[i])
        this.drawPie(
          feeEcharts,
          '总支出金额',
          `¥ ${feeTotal}`,
          feeData,
          '40%',
          '',
          '金额'
        )
      }
      // let feeEcharts = this.$echarts.init(
      //   document.getElementById('feeEcharts')
      // )
      // this.drawPie(
      //   feeEcharts,
      //   `${e ? '总收入金额' : '总支出金额'}`,
      //   `¥ ${feeTotal}`,
      //   feeData,
      //   '40%',
      //   '',
      //   '金额'
      // )
    }
  },
  mounted () {
    let currentMoth = this.getMonthStartAndEnd(0)
    this.businessRevenueRequest({
      startQueryDate: currentMoth[0],
      endQueryDate: currentMoth[1]
    })
    this.revenueValue = [moment(currentMoth[0]), moment(currentMoth[1])]
    this.capitalFixedRequest({})
    this.companyCapitalAccountListRequest({
      deptId: this.companyCapitalStatus,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    })
    this.monthValue = moment(this.getLastMonth())
    this.profitReportRequest({
      queryDate: this.getLastMonth()
    })
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
    })
  }
}
</script>
<style lang="less" scoped>
.gutter-example {
  /deep/ .ant-tabs-bar {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }
  /deep/ .ant-tabs-tab {
    padding: 17.5px 24px !important;
  }
}
.tatal_zjls {
  /deep/ .ant-card-body {
    padding: 5px 10px;
  }
}
</style>
<style scoped>
.gutter-example {
  margin: 24px 24px 0;
  background: #fff;
}
.revenueCard {
  width: 100%;
  min-height: 100px;
  background-repeat: no-repeat;
  background-position: center 90%;
  background-size: 90%;
}
.revenueCard.revenueIcon1 {
  background-image: url(../../../static/images/revenueIcon1.png);
}
.revenueCard.revenueIcon2 {
  background-image: url(../../../static/images/revenueIcon2.png);
}
.revenueCard.revenueIcon3 {
  background-image: url(../../../static/images/revenueIcon3.png);
}
.revenueCard.revenueIcon4 {
  background-image: url(../../../static/images/revenueIcon4.png);
}
.revenueCard.profitIcon1 {
  background-image: url(../../../static/images/profitIcon1.png);
}
.revenueCard.profitIcon2 {
  background-image: url(../../../static/images/profitIcon2.png);
}
.revenueCard.profitIcon3 {
  background-image: url(../../../static/images/profitIcon3.png);
}
.revenueCard.profitIcon4 {
  background-image: url(../../../static/images/profitIcon4.png);
}
.revenueCard.capitalFlow1 {
  background-image: url(../../../static/images/capitalFlow1.png);
}
.revenueCard.capitalFlow2 {
  background-image: url(../../../static/images/capitalFlow2.png);
}
.revenueCard.capitalFlow3 {
  background-image: url(../../../static/images/capitalFlow3.png);
}
.revenueText {
  font-size: 26px;
  color: #333;
  margin-bottom: 25px;
}
.gutter-box {
  background: #fff;
  padding: 5px 0;
}
.echarts {
  display: flex;
}
#pieEcharts1 {
  width: 170px;
  height: 170px;
  margin-right: 10px;
}
.echarts-label {
  flex: 1;
  padding: 20px 0;
  line-height: 35px;
}
.item-label {
  display: flex;
  align-items: center;
  justify-items: center;
  font-size: 14px;
}
.item-label .idot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 12px;
}
.item-label .name {
  color: #666;
  margin-right: 12px;
}
.item-label .percent {
  color: #ccc;
  margin-right: 12px;
}
.item-label .number {
  color: #666;
}
#pieEcharts4 {
  width: 250px;
  height: 250px;
}
.feeType {
  display: flex;
  align-items: center;
}
.f_left {
  flex: 1;
  font-size: 20px;
  color: #333;
}
.f_right {
  width: 130px;
}
#feeEcharts {
  width: 250px;
  height: 250px;
  margin: 0 auto;
}
#accountEcharts {
  width: 100%;
  height: 400px;
  margin: 30px auto 0;
}

.revenueText2 {
  font-size: 26px;
  color: #333;
  margin-bottom: 10px;
}
.revenuet2 {
  margin-bottom: 5px;
  margin-top: 30px;
}
.tatal_zjls .ant-card-body {
  padding: 0;
}
</style>
